<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="renderer" content="webkit">
		<link href="../../css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../js/jquery-easyui-1.4.4/themes/bootstrap/easyui.css">
		<link rel="stylesheet" href="../../js/jquery-easyui-1.4.4/themes/icon.css">
		<link rel="stylesheet" href="../../css/ext_icon.css">
		<script src="../../js/jquery-easyui-1.4.4/jquery.min.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
		<script src="../../js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
		<script src="../../js/ext_jquery.js"></script>
		<script src="../../js/ext_easyui.js"></script>
		<script src="../../js/jquery.form.js"></script>
		<script src="../../js/My97DatePicker/WdatePicker.js"></script>
		<script src="../../js/Chart.min.js"></script>
		<script src="../../js/util.js"></script>
		<script src="../../js/ckeditor/ckeditor.js"></script>
		<link rel="stylesheet" href="../../css/style.css">
		<script src="../../js/main.js"></script>
		<title></title>
	</head>

	<body>
		<script>
			function searchForm() {
				$('#3').html('<canvas id="chart"></canvas>');
				var ttt = $('.form-table').width() * 0.9;
				$('#chart').attr('width', ttt);
				$('#chart').attr('height',
					$('#main', parent.document).height() * 0.85);
				var num = $('#1 .textbox-value').val();
				var type = $('#2 .textbox-value').val();
				if (num == null || num == '' || num == ' ' || num <= 0) {
					num = 10;
				}
				var dateArray = new Array();
				var count = new Array();
				for (var i = num; i > 0; i--) {
					dateArray.push(i + '产品');
					count.push(i * 2);
				}
				var data = {
					labels: dateArray,
					datasets: [{
						fillColor: '#CCEEFF',
						strokeColor: '#FF0000',
						pointColor: '#FF0000',
						pointStrokeColor: '#FF0000',
						data: count
					}]
				};
				var canLength = dateArray.length * 80;
				if (canLength > ttt) {
					canLength = ttt;
				}
				var canvas = $('#chart').get(0);
				canvas.width = canLength;
				var chart = canvas.getContext('2d');
				chart.clearRect(0, 0, ttt, $('#main', parent.document).height());
				if (type > 0) {
					new Chart(chart).Line(data);
				} else {
					new Chart(chart).Bar(data);
				}
			}
		</script>
		<form class="form-table" style="width: 100%; padding: 0;" action="${pageContext.request.contextPath}/link_line_list.do" method="post">
			<table class="table table-condensed">
				<tr>
					<th width="120px">排行前：</th>
					<th width="100px" id="1"><input name="number" class="easyui-numberbox" data-options="required:true" style="width: 50%; height: 30px;"> 位</th>
					<th width="90px" id="2">
						<select class="easyui-combobox" data-options="required:true,
								panelHeight:'auto',
								editable:false" style="width: 100%;height: 30px;">
							<option value="0">柱状图</option>
							<option value="1">条形图</option>
						</select></th>
					<th width="67px"><a href="javascript:void(0);" class="btn btn-success" role="button" onclick="searchForm()"><span
						class="glyphicon glyphicon-search"></span> 检索</a></th>
					<th></th>
				</tr>
			</table>
		</form>
		<div style="text-align: center; padding-bottom: 10px; width: 100%;" id="3">
			<canvas id="chart"></canvas>
		</div>
	</body>

</html>